Vue的核心是数据与视图的双向绑定，当我们修改数组时，Vue会检测到数据变化，所以用v-for渲染的视图也会立即更新。Vue包含了一组观察数组变异的方法，使用他们改变数组也会触发视图更新。

比如以下例子：

JavaScript代码：

然后，我再给数据books添加一项：

使用上面的方法会改变原始数组，当然也有些方法不会改变原数组，例如：

他们返回的是一个新数组，在使用这些非变异方法时，可以用新数组来替换原数组，以下例子，我们找出含有JavaScript关键词的数目，例如：

渲染的结果中，第一项《Vue.js实战》被过滤到了，只显示书名中含有JavaScript的选项。

Vue在检测到数组变化时，并不是直接重新渲染整个列表，而是最大化的复用DOM元素。替换的数组中，含有相同元素的项不会被重新渲染，因此可以大胆地用新数组来替换旧数组，不用担心新能问题。

需要注意的是，以下变动的数组中，Vue是不能检测到的，也不会触发视图更新：

解决第一个问题可以用两种方法实现同样的效果，第一种是使用Vue内置的set方法：

如果是在webpack中使用组件化的方式，默认是没有导入Vue的，这时可以使用$set，例如：

//这里的this指向的就是当前组件实例，即app。在非webpack模式下也可以用$set方法，例如app.$set(…)

另一种方法：

第二个问题也可以直接用splice来解决：

「点点赞赏，手留余香」

给作者打赏，鼓励TA抓紧创作！

还没有人赞赏，快来当第一个赞赏的人吧！